<template>
  <view class="backdrop">
    <view class="toubu">
      <image class="fanhui" :src="imageUrl + '/tesewuchan/tesewuchanfanhui2.png'" mode="" @click="fhdaolan"></image>
      <p class="MainTitle">文创艺术</p>
    </view>

    <view class="biaoti"></view>
    <view class="navigation-wrapper">
      <view class="navigation-bar" style="display: flex;">
        <view style="margin-left: 20rpx;" :class="{'active-option': true, 'greens': image1Selected, 'grays':!image1Selected}" @click="selectImage(1)">全部</view>
        <view style="margin-left: 20rpx;" :class="{'active-option': true, 'green': image2Selected, 'gray':!image2Selected}" @click="selectImage(2)">数字文化</view>
        <view style="margin-left: 20rpx;" :class="{'active-option': true, 'green': image3Selected, 'gray':!image3Selected}" @click="selectImage(3)">数字人居</view>
        <view style="margin-left: 20rpx;" :class="{'active-option': true, 'green': image4Selected, 'gray':!image4Selected}" @click="selectImage(4)">数字人居</view>
      </view>
    </view>

    <view class="zhuti">
      <image class="jianbian" :src="imageUrl + '/wenchuangyishu/wenchuangyishujianbian.png'" mode=""></image>
      <view class="konjian">
        <p class="xuni">靖港古镇虚拟文化空间</p>
        <p class="houzi">作者：齐天大圣</p>
        <image style="height: 362rpx;width: 646.33rpx;" :src="imageUrl + '/wenchuangyishu/wenchuangyishushiping2.png'" mode=""></image>
        <p class="jianjie"><span style="color: #464646bf;font-weight: 560;">作品简介：</span>本作品选择湘江古镇群中靖港古镇传统民居为主体制作古建筑生长动画，将古镇传统建筑内的结构依次拆解，通过动画的形式将建筑结构进行拼接呈现，此呈现形式能够使人们更加直观和全面的了解古建筑的内部结构。</p>
       <image class="zan" :src="imageUrl + '/wenchuangyishu/wenchuangyishuzan.png'" mode=""></image>
       <image class="zan" :src="imageUrl + '/wenchuangyishu/wenchuangyishushocang.png'" mode=""></image>
       <image class="zan" :src="imageUrl + '/wenchuangyishu/wenchuangyishupinlun.png'" mode=""></image>
		<span class="zanshu">23
			<span class="zanshu">23
				<span class="zanshu">234</span>
			</span>
		</span>
	  </view>
       <image class="tianjia" :src="imageUrl + '/wenchuangyishu/wenchuangyishutianjai.png'" mode="" @click="handleClick"></image>
      <view class="xian"></view>
      <view class="konjian">
        <p class="xuni">靖港古镇虚拟文化空间</p>
        <p class="houzi">作者：齐天大圣</p>
        <image style="height: 362rpx;width: 646.33rpx;" src="https://xnlv.lizxx.com/image/xnlv/static/wenchuangyishu/wenchuangyishushiping2.png" mode=""></image>
        <p class="jianjie"><span style="color: #464646bf;font-weight: 560;">作品简介：</span>本作品选择湘江古镇群中靖港古镇传统民居为主体制作古建筑生长动画，将古镇传统建筑内的结构依次拆解，通过动画的形式将建筑结构进行拼接呈现，此呈现形式能够使人们更加直观和全面的了解古建筑的内部结构。</p>
        <image class="zan" :src="imageUrl + '/wenchuangyishu/wenchuangyishuzan.png'" mode=""></image>
        <image class="zan" :src="imageUrl + '/wenchuangyishu/wenchuangyishushocang.png'" mode=""></image>
        <image class="zan" :src="imageUrl + '/wenchuangyishu/wenchuangyishupinlun.png'" mode=""></image>
		<span class="zanshu">23
			<span class="zanshu">23
				<span class="zanshu">234</span>
			</span>
		</span>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
	imageUrl: this.$imageUrl,
      image1Selected: true,
      image2Selected: false,
      image3Selected: false,
      image4Selected: false,
    };
  },
  methods: {
    selectImage(index) {
      this.image1Selected = index === 1;
      this.image2Selected = index === 2;
      this.image3Selected = index === 3;
      this.image4Selected = index === 4;
      if (index === 1) {
        this.currentList = this.image1List;
      } else if (index === 2) {
        this.currentList = this.image2List;
      } else if (index === 3) {
        this.currentList = this.image3List;
      } else if (index === 4) {
        this.currentList = this.image4List;
      }
    },
    handleClick() {
      wx.redirectTo({
        url: '/pagesNew/pages-Cultural-and-Creative/Release-Cultural-and-Creative-Products',
      });
    },
    fhdaolan() {
      wx.redirectTo({
        url: '/pagesNew/pages-guide/guide',
      });
    },
  },
};
</script>

<style>
	.zhuti {
	    margin-top: 80rpx;
	}
	.navigation-wrapper {
	    position: fixed;
	    z-index: 4;
	    width: 100vw;
	    height: 120rpx;
	    top: 180rpx;
	    background-color: #e4ebe9;
	}
	.navigation-bar {
	    position: absolute;
	    z-index: 4;
	    width: 230vw;
	    /* background-color: #e4ebe9; */
	    border-radius: 40rpx;
	    margin-top: 40rpx;
	}
	.active-option {
	    display: inline-block;
	    padding: 10rpx 20rpx;
	}
	.greens {
	    width: 144rpx;
	    height: 62rpx;
	    font-family: Source Han Sans CN, Source Han Sans CN;
	    /* font-weight: bold; */
	    font-size: 28rpx;
	    color: white;
	    line-height: 76rpx;
	    text-align: center;
	    vertical-align: middle;
	    font-style: normal;
	    text-transform: none;
	    background-color: #808D84;
	    border-radius: 100rpx;
	    padding-top: 6rpx;
	}
	.green {
	    width: 158rpx;
	    height: 62rpx;
	    font-family: Source Han Sans CN, Source Han Sans CN;
	    /* font-weight: bold; */
	    font-size: 28rpx;
	    color: white;
	    line-height: 76rpx;
	    text-align: center;
	    vertical-align: middle;
	    font-style: normal;
	    text-transform: none;
	    background-color: #808D84;
	    border-radius: 100rpx;
	    padding-top: 6rpx;
	}
	.grays {
	    width: 144rpx;
	    height: 62rpx;
	    font-family: Source Han Sans CN, Source Han Sans CN;
	    font-weight: 400;
	    font-size: 28rpx;
	    color: #808D84;
	    line-height: 60rpx;
	    text-align: center;
	    font-style: normal;
	    text-transform: none;
	    background-color: #d7dedb;
	    border-radius: 100rpx;
	    padding-top: 6rpx;
	}
	.gray {
	    width: 158rpx;
	    height: 62rpx;
	    font-family: Source Han Sans CN, Source Han Sans CN;
	    font-weight: 400;
	    font-size: 28rpx;
	    color: #808D84;
	    line-height: 60rpx;
	    text-align: center;
	    font-style: normal;
	    text-transform: none;
	    background-color: #d7dedb;
	    border-radius: 100rpx;
	    padding-top: 6rpx;
	}
	.toubu {
	    height: 180rpx;
	    width: 100vw;
	    position: fixed;
	    background-color: #e4ebe9;
	    z-index: 99;
	}
	.tianjia {
	    width: 98rpx;
	    height: 98rpx;
	    position: sticky;
	    position: absolute;
	    top: 85%;
	    right: 10%;
	    position: fixed;
	}
	.xian {
	    width: 100vw;
	    height: 2rpx;
	    background-color: #7f7f7fbf;
	    margin-top: 20rpx;
	    margin-bottom: 20rpx;
	}
	.zanshu {
	    margin-left: 134rpx;
	    margin-top: 20rpx;
	    color: #808D84;
	}
	.zan {
	    width: 42rpx;
	    height: 42rpx;
	    display: inline-block;
	    margin-left: 134rpx;
	    margin-top: 20rpx;
	}
	.jianjie {
	    font-size: 30rpx;
	    color: #7f7f7fbf;
	    margin-top: 20rpx;
	    line-height: 2;
	}
	.houzi {
	    font-size: 22rpx;
	    color: #7f7f7fbf;
	    margin-top: 20rpx;
	    margin-bottom: 20rpx;
	}
	.xuni {
	    width: 320rpx;
	    height: 36rpx;
	    font-family: Source Han Sans CN, Source Han Sans CN;
	    font-weight: 950;
	    font-size: 32rpx;
	    color: #3F5649;
	    line-height: 36rpx;
	    text-align: left;
	    font-style: normal;
	    text-transform: none;
	}
	.konjian {
	    width: 646rpx;
	    margin-left: 46rpx;
	}
	.jianbian {
	    width: 100vw;
	    height: 108rpx;
	}
	.biaoti {
	    height: 72rpx;
	    margin-top: 180rpx;
	}
	.MainTitle {
	    color: #40564a;
	    font-weight: 550;
	    text-align: center;
	    margin-top: 110rpx;
	}
	.fanhui {
	    width: 38rpx;
	    height: 38rpx;
	    margin-top: 110rpx;
	    margin-left: 20rpx;
	    position: fixed;
	}
	.backdrop {
	    background-color: #e4ebe9;
	    height: 100vh;
	    width: 100vw;
	    position: fixed;
	    top: 0;
	    left: 0;
	    overflow: auto;
	    overflow-x: hidden;
	}
</style>